<template>
    <view class="container orderdetails">
        <uni-list>
            <uni-list-item direction ="row">
                <view class="titlelo" slot="header">需求内容 <text class="red">*</text></view>
                <view class="bodyc" slot="body">
                   <uni-easyinput type="textarea" v-model="content" placeholder="请输入新增的需求内容" /> 
                </view> 
            </uni-list-item>
            <uni-list-item direction ="row">
                <view class="titlelo" slot="header">签证照片 <text class="red">*</text></view>
                <view class="" slot="body">
                  
                  <view class="addthumg" v-if="!thumb" @click="uploadthumg()">
                      +
                  </view>  
                  
                  <image :src="thumb" @click="uploadthumg()" v-else mode="widthFix" class="thumb"></image>
                
                </view> 
            </uni-list-item>        
        </uni-list>
        <view class="btns">
            <!-- <view class="btn2" @click="showSign">签名</view> -->
            <view class="btn1" @click="submit()">确认提交</view>
        </view>
        <uni-popup ref="signbox">
            <div class="bigbox">
                <sign @signEnd="signEnd" @close="close"></sign>
            </div>
        </uni-popup>
    </view>
</template>

<script>
   
    import sign from '@/components/wgd-sign01/wgd-sign01.vue'
    export default{
        name:"visa",
        data(){
            return{
               id:'',
               content:'',
               thumb:'',
               showProp: false,
               signedImg: '',
            }
        },
        components: {
        	sign
        },
        onLoad(option){
            this.id = option.id
        },
        methods:{
            uploadthumg(){
                var _this =  this
                uni.chooseImage({
                    count:1,
                    success:function(res){
                  
                   
                        uni.showLoading({
                            title:'上传中...',
                            mask:true
                        })
                        var uploadTask = uni.uploadFile({
                            url:_this.$api.postURL+'project.visa/uploadone',
                            file:res.tempFiles[0],
                            fileType:"image",
                            name:"file",
                            header:{
                                Authorization:uni.getStorageSync('nangtong_login_token')
                            },
                           
                            success: (uploadFileRes) => {
                                var data = JSON.parse(uploadFileRes.data);
                                
                                if(data.code == 0){
                                    _this.$error(data.message)
                                }else{
                                   _this.thumb = data.data.url
                                }
                            },
                            complete:function(){
                             
                                uni.hideLoading()
                            }
                        })
                      
                    },
                    
                })
            },
            submit(){
                if(!this.content){
                    this.$error("请输入修改内容")
                    return false;
                }
                if(!this.thumb){
                    this.$error("请上传签证照片")
                    return false;
                }
                uni.showLoading({
                    title:'上传中...',
                    mask:true
                })
                
                this.$api.post(`project.visa/submit`,{id:this.id,content:this.content,thumb:this.thumb}).then(()=>{
                    uni.$emit('visa',{
                        data:1
                    })
                    uni.navigateBack({data:1})
                    uni.hideLoading()
                })
            },
            close(){
            
                this.$refs.signbox.close()
            },
            signEnd(signImg){
               
                
            	this.thumb = signImg.base64Img;

                this.$refs.signbox.close()
            },
            showSign(){
            	
                this.$refs.signbox.open('top')
            }
        }
    }
</script>

<style lang="less" scoped>
    page{
        background-color: #fff;
        padding: 0 20rpx;
    }
    .titlelo{
        font-size: 26rpx;
        font-weight: bold;
        width: 150rpx;
        
    }
    .bodyc{
        width: 560rpx;
        display: flex;
        justify-content: end;
        font-size: 26rpx;
        align-items: center;
        .client_name{
            margin-right: 10rpx;
        }
        .inputc{
            text-align: right;
        }
        .tips{
            margin-left: 10rpx;
        }
    }
    
    .thumb{
        width: 180rpx;
    }
    .btns{
         width: 80%;
         margin: 0 auto;
         display: flex;
         justify-content: center;
         margin-top: 100rpx;
         align-items: center;
        .btn1{
            width: 80%;
            height: 60rpx;
            line-height: 60rpx;
            background-color:#007aff;
            color: #fff;
            text-align: center;
        }
        .btn2{
            width: 30%;
            height: 48rpx;
            line-height: 48rpx;
            border: 1px solid #909399;
            color: #909399;
            text-align: center;
        }
    }
    .bigbox{
        width: 100vw;
        height: 100vh;
    }
    .addthumg{
        width: 180rpx;
        height: 180rpx;
        border: 1px solid #909399;
        text-align: center;
        line-height:180rpx ;
        font-size: 88rpx;
        color: #909399;
    }
</style>